<template>
<transition
    name="el-zoom-in-top"
    @before-enter="handleDropDownEnter"
    @after-leave="doDestroy">
    <div class="rs-tree-edit-dropdown el-popper" v-show="value" :style="style">
        <el-scrollbar wrap-class="rs-tree-edit-wrap">
            <el-tree ref="tree" 
                :data="items" 
                :current-node-key="currentKey" 
                :default-expanded-keys="expandKeys" 
                :node-key="nodeKey" 
                :props="defaultProps" 
                :expand-on-click-node="false" 
                :render-content="renderContent"
                @node-click="handleTreeNodeClick">
            </el-tree>
        </el-scrollbar>
    </div>
</transition>
</template>
<script>
import { PopupManager } from 'element-ui/lib/utils/popup'
import Popper from 'element-ui/lib/utils/vue-popper';
export default {
    name:'RsTreeEditDropDown',
    mixins: [Popper],
    props: {
        visibleArrow: {
            default: true
        },        
    },
    data(){
        return{
            visible:false
        }
    },
    computed:{
        items(){
            return this.$parent.items;
        },
        defaultProps(){
            return this.$parent.defaultProps;
        },
        style(){
            return {
                width:this.$parent.width + 'px',
                height:this.$parent.height + 'px'
            }
        },
        nodeKey(){
            return this.$parent.nodeKey;
        },
        expandKeys(){
            return this.$parent.expandKeys;
        },
        currentKey(){
            return this.$parent.value;
        }
    },
    mounted(){
        this.$parent.popperElm = this.popperElm = this.$el;
        this.referenceElm = this.$parent.$el;
        if( this.currentKey !== ''){
            this.$nextTick(()=>{

                this.resetSelectedNode();
            })
        }        
    },
    methods:{
        resetSelectedNode(){
            const tree = this.$refs.tree;
            const oldKey = tree.getCurrentKey();
            if( oldKey ){
                const oldNode = tree.getNode(oldKey);
                if(oldNode){
                    oldNode.isCurrent = false;
                }
            }

            let node = tree.getNode(this.currentKey);
            if( !node) {

                return null;
            }
            tree.setCurrentNode(node.data);
            const result = node;
            this.$parent.selectedLabel = node.label;
            while( node.parent.level > 0 ){

                node = node.parent;
                node.expand();
            }
            return result;
        },
        handleDropDownEnter(){

        },
        handleTreeNodeClick(data,node,tree){
            this.$parent.handleItemClick(data);
        },
        getNodeIcon(node){

            if( node.isLeaf ){
                return <i class="rs-icon-file-fill0"></i>
            }
            return node.expanded?<i class="rs-icon-folder-open-fill"></i>:<i class="rs-icon-folder-fill"></i>
        },
        renderContent(h, { node, data, store }){
            return (
            <span class="rs-tree-node icon">
                {this.getNodeIcon(node)}
                <span class="label">{node.label}</span>
            </span>);
        }
    }
}
</script>